<template>
  <div class="sidebar-wrapper">
    <!-- Logo 区域 -->
    <div class="sidebar-logo">
      <div class="logo-bg"></div>
      <span>皮皮虾管理后台</span>
    </div>
    <!-- 菜单区域 -->
    <el-menu
        default-active="dashboard"
        class="sidebar-menu"
        router
        background-color="#1f2937"
        text-color="#f3f4f6"
        active-text-color="#ffffff"
        active-background-color="#d97706"
    >
      <el-menu-item index="dashboard">
        <el-icon><Menu /></el-icon>
        <span>控制台</span>
      </el-menu-item>
      <el-menu-item index="user">
        <el-icon><User /></el-icon>
        <span>用户管理</span>
      </el-menu-item>
      <el-menu-item index="content">
        <el-icon><Document /></el-icon>
        <span>内容管理</span>
      </el-menu-item>
      <el-menu-item index="comment">
        <el-icon><ChatDotRound /></el-icon>
        <span>评论管理</span>
      </el-menu-item>
      <el-menu-item index="ranking">
        <el-icon><Star /></el-icon>
        <span>热门榜单</span>
      </el-menu-item>
      <el-sub-menu index="system">
        <template #title>
          <el-icon><Setting /></el-icon>
          <span>系统</span>
        </template>
        <el-menu-item index="notice">消息通知</el-menu-item>
        <el-menu-item index="system">系统设置</el-menu-item>
        <el-menu-item index="stat">数据统计</el-menu-item>
      </el-sub-menu>
    </el-menu>
    <!-- 底部用户信息 -->
    <div class="sidebar-footer">
      <el-avatar src="https://example.com/admin-avatar.jpg" />
      <div class="footer-info">
        <p>管理员</p>
        <p>超级管理员</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Menu, User, Document, ChatDotRound, Star, Setting } from '@element-plus/icons-vue';
</script>

<style scoped>
.sidebar-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #374151;
}

.logo-bg {
  width: 32px;
  height: 32px;
  background-color: #f97316;
  border-radius: 6px;
  margin-right: 8px;
}

.sidebar-menu {
  flex: 1;
  padding-top: 20px;
}

.el-menu {
  border-right: none;
}

.sidebar-footer {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  border-top: 1px solid #374151;
}

.footer-info {
  margin-left: 8px;
  line-height: 1.2;
}

.footer-info p {
  margin: 0;
  font-size: 12px;
}
</style>